<template>
  <div id="detail">
    <div class="top"></div>
    <div class="toplist">
      <ul>
        <li
          v-for="item in topList"
          :key="item.id"
          :class="item.isActive ? 'active' : ''"
        >
          {{ item.text }}
          <div class="bar" v-show="item.isActive"></div>
        </li>
      </ul>
    </div>
    <div class="mainpic">
      <div class="icon i1">
        <i class="bi bi-box-arrow-up-right"></i>
      </div>
      <div class="icon i2">
        <span>8/8</span>
      </div>
      <img class="imag" :src="itemInfo.img" alt="找不到图片!" />
    </div>
    <div class="infobox">
      <div class="pricebox">
        <span class="price yuan">{{ itemInfo.price }}</span>
        <span class="mprice yuan">{{ itemInfo.market_price }}</span>
        <div class="star fright">
          <i class="bi bi-star"></i>
          <p>收藏</p>
        </div>
      </div>
      <div class="namebox">
        <p class="itemname">{{ itemInfo.goodsname }}</p>
        <p class="iteminfo">{{ itemInfo.goodsname }}</p>
      </div>
      <div class="time1">
        <p>11.11限时299元起</p>
      </div>
      <div class="time2">
        <span class="t1"
          >此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</span
        >
        <span class="t2"> 查看<i class="bi bi-chevron-right"></i> </span>
      </div>
    </div>
    <div class="selectbox">
      <div class="row">
        <div class="left fleft">领券</div>
        <div class="right fleft">
          <div class="lingquan">
            <p>300</p>
            <p>50</p>
            <p>10</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="left fleft">分期</div>
        <div class="right fleft">
          <span>可选3/6/12期</span>
          <i class="bi bi-chevron-right fright"></i>
        </div>
      </div>
      <div class="row">
        <div class="left fleft">数量</div>
        <div class="right fleft">
          <van-stepper v-model="value" />
        </div>
      </div>
      <div class="row">
        <div class="left fleft">分类</div>
        <div class="right fleft">
          <div class="cate fleft">
            <van-tag
              plain
              type="primary"
              v-for="(item, index) in cates"
              :key="index"
              class="catetag"
              >{{ item }}</van-tag
            >
          </div>
          <i class="bi bi-chevron-right fright"></i>
        </div>
      </div>
    </div>
    <div class="detailbox">
      <p class="title">商品详情</p>
      <p v-if="itemInfo.description == ''">暂无</p>
      <p v-html="itemInfo.description" v-else></p>
    </div>
    <div class="footer"></div>
    <div class="bottom">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="$router.push('/cart')"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addtoCart"
        />
        <van-goods-action-button type="danger" text="立即购买" @click="goPay" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { Detail, Cartadd } from "../util/request/api";
import { mapActions, mapGetters } from "vuex";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      id: this.$route.query.id,
      itemInfo: {},
      value: 1,
      cates: [],
      topList: [
        {
          id: 1,
          text: "商品",
          isActive: true,
        },
        {
          id: 2,
          text: "评价",
          isActive: false,
        },
        {
          id: 3,
          text: "详情",
          isActive: false,
        },
        {
          id: 4,
          text: "推荐",
          isActive: false,
        },
      ],
    };
  },
  mounted() {
    Detail(this.id)
      .then((res) => {
        this.itemInfo = res.list[0];
        console.log(this.itemInfo);
        this.cates = this.itemInfo.specsattr.split(",");
      })
      .catch((err) => {
        console.log(err);
      });
  },
  computed: {
    ...mapGetters(["getOrderList"]),
    uid: function () {
      return JSON.parse(sessionStorage.getItem("user")).uid;
    },
  },
  methods: {
    ...mapActions(["changeOrderAction"]),
    addtoCart() {
      if (!sessionStorage.getItem("user")) {
        Dialog.confirm({
          message: "请先登录",
        })
          .then(() => {
            next("/login");
          })
          .catch(() => {
            next("/home");
          });
        return;
      }
      Cartadd(this.uid, this.id, this.value)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            Toast.success(res.msg);
          } else {
            Toast.fail(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goPay() {
      if (!sessionStorage.getItem("user")) {
        Dialog.confirm({
          message: "请先登录",
        })
          .then(() => {
            next("/login");
          })
          .catch(() => {
            next("/home");
          });
        return;
      }
      Cartadd(this.uid, this.id, this.value)
        .then((res) => {
          if (res.code == 200) {
            let obj = {
              uid: this.uid,
              goodsid: this.itemInfo.id,
              goodsname: this.itemInfo.goodsname,
              price: this.itemInfo.price,
              num: this.value,
              img: this.itemInfo.img,
              cartid: res.list,
            };
            this.changeOrderAction([obj]);
            this.$router.push("/order");
          } else {
            Toast.fail(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.catetag {
  margin-right: 0.05rem;
}
.imag{
  width: 100%;

}
@import url("../assets/css/detail.css");
</style>